<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <title>我要发帖</title>

    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="${ctxStatic}/shopcartstatic/css/video/weui.min.css">
    <link rel="stylesheet" href="${ctxStatic}/shopcartstatic/css/video/style.css">
</head>
<body>
<header class="header">
    <div class="h-back" onclick="javascript:history.go(-1)"><span style="color:white;">返回</span></div>
    <div class="h-title">我要发帖</div>
    <div class="h-right j_publish"></div>
</header>
<div class="weui-cells weui-cells_form" style="margin-top: 0">
    <form action="addcomments" method="post" id="frm">
        <input type="hidden" id="userId" name="userId" value="${fns:getUser().id}">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="内容，10-700个字" rows="4" id="content"
                          name="content"></textarea>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><img src="${ctxStatic}/shopcartstatic/images/ic-pic.png" alt=""
                                            style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p></p>
            </div>
            <div class="weui-cell__ft">
                <input type="hidden" name="picture" value="" id="imagesUrl">
                <%--<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn j_submit">发表</a>--%>
                <input type="submit" value="发表" class="weui-btn weui-btn_mini weui-btn_warn j_submit">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">

                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"
                                   multiple="" size="9" name="picture">
                           <%-- <form:hidden id="nameImage" path="picture" htmlEscape="false" maxlength="255"
                                         class="input-xlarge"/>
                            <sys:ckfinder input="nameImage" type="images" uploadPath="/img" selectMultiple="true"
                                          maxWidth="100" maxHeight="100"/>--%>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="actionsheet">
    <div class="weui-mask" id="iosMask" style="display: none;"></div>
    <div class="weui-actionsheet" id="iosActionsheet">
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell j_del_img">删除</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
        </div>
    </div>
</div>
<script src="${ctxStatic}/shopcartstatic/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    var index = 0;
    /*$("#uploaderInput").change(function () {
        for (var i = 0; i < this.files.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(this.files[i]);
            reader.onload = function (e) {

                var img = new Image(),
                    maxH = 500;
                img.onload = function () {
                    var cvs = document.createElement('canvas'),
                        ctx = cvs.getContext('2d');

                    if (img.height > maxH) {
                        img.width *= maxH / img.height;
                        img.height = maxH;
                    }
                    cvs.width = img.width;
                    cvs.height = img.height;

                    ctx.clearRect(0, 0, cvs.width, cvs.height);
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var dataUrl = cvs.toDataURL('image/jpeg', 1);

                    index++;

                    $("#uploaderFiles").append("<li class=\"weui-uploader__file img" + index + "\" style=\"background-image:url(" + dataUrl + ")\"></li>");
                    // 上传

                };

                img.src = this.result;
            }

        }
    });*/
    $("#uploaderInput").change(function () {
        var $files = $("#uploaderInput")[0].files;
        if ($files.length > 0) {
            var imgUrls = "";
            for (var i = 0; i < $files.length; i++) {
                var data = new FormData();
                data.append('file', $files[i]);

                $.ajax({
                    data: data,
                    url: "uploadSite",
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data.status == '0') {
                            var html = $(".weui-uploader__input-box").html();
                            var str = '<img src="http://localhost:8090/shop/'+data.url+'" alt="" style="width: 100px;height: 100px" name="picture">';
                            $(".weui-uploader__input-box").html(str+html);
                            $("#imagesUrl").val('http://localhost:8090/shop/'+data.url);
                        }

                    },
                    error: function () {
                        $('#alert-info').html('图片上传失败，请重试').show().delay(2000).hide(0);
                    }
                });
            }
        }
    })


</script>
</body>
</html>